<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择站点：</span>
                <el-select v-model="dc_id" clearable placeholder="请选择站点">
                    <el-option :label="item.title" :value="item.dc_id" v-for="item in dc_list" :key="item.dc_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">上架时间：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="商品" width="300">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image
                            class="table-lr__img"
                            loading="lazy"
                            :src="proxy.imgUrl + row.product_img + '!img_400'"
                            fit="cover"
                            v-if="row.product_img"
                        />
                        <div class="table-lr__right">
                            <p class="lr-title line-one" style="font-size: 15px">{{ row.product_name }}</p>
                            <p>供应商ID：{{ row.supplier_id }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="order_nums" label="规格">
                <template #default="{ row }">
                    {{ row.norm + row.unit }}
                </template>
            </el-table-column>
            <el-table-column prop="dc_title" label="站点名称" width="300"></el-table-column>
            <el-table-column prop="total_sku" label="总库存"></el-table-column>
            <el-table-column prop="total_sales" label="总销量"></el-table-column>
            <el-table-column label="操作" width="120" class-name="operation-nav">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickDetail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter } from "vue-router"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getPublickSearch()
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        supplier_id: supplier_id.value,
        dc_id: dc_id.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    getdata("supplier/product", params)
}

// 搜索
const supplier_id = ref("")
const dc_id = ref("")
const area_time = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

const clickDetail = (row) => {
    router.push({
        path: "/Goods/GoodsPublicDetail",
        query: {
            gid: row.product_common_id,
        },
    })
}

/***
 * 获取标签和站点数据
 * @param {Array} tag_list 标签数据
 * @param {Array} dc_list 站点数据
 */
const tag_list = ref([])
const dc_list = ref([])
function getPublickSearch() {
    proxy.$axios
        .get("supplier/search")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                tag_list.value = result.tag_list
                dc_list.value = result.dc_list
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "ProductCount",
}
</script>

<style lang="less" scoped>
.table-lr__img {
    width: 40px;
    height: 40px;
}
.table-lr__right {
    min-height: 40px;
}
</style>
